<template>
    <section class="mc-select-dialog">
        <el-dialog :title="title" :visible="SelectDialogVisible" :before-close="change">

            <el-form label-width="100px" :model="formAssign" ref="formAssign">

                <div style="height: 370px;overflow: auto;">
                    <el-tree ref="tree" node-key="id" :default-expanded-keys="formAssign.checkedKeys"
                             :default-checked-keys="formAssign.checkedKeys" :data="formAssign.authData"
                             :props="treeProps"  show-checkbox check-strictly
                             @check-change="nodeClick"></el-tree>
                </div>

                <el-form-item>
                    <el-button type="primary" @click="submitFormAssignAuth()">确定</el-button>
                    <el-button @click="change">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </section>
</template>
<script>
    import {AjaxByAll} from '@/api/api'

    export default {
        data() {
            return {
                formAssign: {
                    authData: null,
                    checkedKeys: this.selectIds,
                    authTitle: this.title
                }, treeProps: {
                    label: 'name',
                    children: 'children'
                },
                SelectDialogVisible: this.DialogVisible,
                checkedId:null,
                checkedName:null

            }
        },
        methods: {
            //关闭
            change() {
                this.SelectDialogVisible = !this.SelectDialogVisible;
                this.$emit("on-dialog-change", {
                    submitFormData:false,
                    checkedId: this.checkedId,
                    checkedName: this.checkedName,
                });
            },
            nodeClick(data,checked) {
                if(checked) {
                    this.checkedId = data.id;
                    this.checkedName = data.name;
                    this.$refs.tree.setCheckedNodes([data]);
                } else {
                    this.checkedId = null;
                    this.checkedName = null;
                }

            } , submitFormAssignAuth() {

                this.$emit("on-dialog-change", {
                    submitFormData:true,
                    checkedId: this.checkedId,
                    checkedName: this.checkedName,
                });
            },
            openTree() {

                var method = 'get';
                var form = this.params;
                AjaxByAll(method, this.url, form).then(data => {
                    if (data.code === 200) {
                        this.formAssign.authData = data.data;

                    } else {
                        this.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                });

            }
        },
        watch: {}
        ,
        mounted: function () {
            this.openTree();

        }
        ,
        props: {
            url: String,
            selectIds: Array,

            title: String,
            DialogVisible: Boolean
        }
    }
</script>

<style>

</style>
